<template>
  <div v-if="isShowConfirm" class="my-confirm" @touchmove.prevent>
    <div class="confirm-content-wrap" @click.stop>
      <div class="close" @click="hidden">
        <i class="el-icon-close close-icon" @click="hidden"></i>
      </div>
      <div class="contentBox">
        <span class="my-confirm-content">{{ content }}</span>
      </div>
      <div class="my-operation">
        <div class="my-cancel-btn border-right" v-if="type == 'confirm'" @click="clickFun('clickCancel')">
          <span class="calColor">取消</span>
        </div>
        <div :class="type == 'confirm' ? 'my-cancel-btn' : 'my-alert'" @click="clickFun('clickConfirm')">
          <span class="my-btn-text">{{ outerData == '1' ? '立即下载' : '确认' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowConfirm: false,
      content: '',
      cancelText: '取消',
      confirmText: '确认',
      type: 'confirm',
      outerData: null,
      clickTypes: ''
    }
  },
  methods: {
    show(content, config) {
      this.isShowConfirm = true
      this.content = content || ''
      if (Object.prototype.toString.call(config) === '[object Object]') {
        this.cancelText = config.cancelText || '取消'
        this.confirmText = config.confirmText || '确认'
        this.type = config.type || 'config'
        this.outerData = config.data || null
        this.dataTypeClick = config.dataTypeClick
      }
    },
    hidden() {
      this.isShowConfirm = false
      this.cancelText = '取消'
      this.confirmText = '确认'
      this.type = 'confirm'
      this.outerData = null
      this.dataTypeClick = ''
    },
    clickFun(type) {
      this.$emit('userBehavior', type, this.outerData)
      this.hidden()
    }
  }
}
</script>
<style scoped>
.my-confirm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.confirm-fade-enter-actinve {
  animation: opacity 0.3s;
}
.confirm-fade-enter-actinve .confirm-content-wrap {
  animation: scale 0.3s;
}
.confirm-fade-leave-active {
  animation: outOpacity 0.2s;
}
.confirm-content-wrap {
  width: 76vw;
  height: 45vw;
  background-color: #ffffff;
  user-select: none;
  display: flex;
  flex-direction: column;
  border-radius: 2.2vw;
}
.contentBox {
  height: 27vw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 2vw 0 2vw;
}
.my-confirm-content {
  font-size: 4vw;
  color: #5d667a;
  font-family: PingFangSC-Regular;
  display: flex;
  flex-wrap: wrap;
}
.my-operation {
  width: 76vw;
  height: 13vw;
  display: flex;
  flex-direction: row;
  border-top: 0.4vw solid #ebeef3;
}
.border-right {
  border-right: 0.4vw solid #ebeef3;
}
.my-cancel-btn {
  width: 38vw;
  height: 13vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-btn-text {
  font-size: 4vw;
  font-family: PingFangSC-Regular;
  color: #4a90e2;
}
.calColor {
  font-size: 4vw;
  font-family: PingFangSC-Regular;
  color: #121c32;
}
.my-alert {
  width: 76vw;
  height: 13vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.confirm-btn-cancel {
  width: 540px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.close {
  height: 5vw;
  text-align: right;
  padding-right: 3%;
  margin-top: 8px;
}
.close-icon {
  font-size: 22px;
}

@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scale {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes outOpacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>